﻿@{
    ViewData["Title"] = "Home Page";
}

<div id="app">
    <el-card class="box-card" style="width:100%;">
        <template #header>
            <div>
                <span>新建</span>
            </div>
        </template>
        <el-form :model="form" ref="form" label-width="80px" size="mini" :inline="false">
            <el-form-item label="名字">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-button v-on:click="save" icon="el-icon-check" type="primary">保存</el-button>
        </el-form>

    </el-card>

    <el-card class="box-card" style="width:100%;margin-top:10px;">
        <template #header>
            <div>
                <span>用户列表</span>
            </div>
        </template>
        <el-table :data="tableData"
                  ref="tableData"
                  highlight-current-row
                  style="width: 100%">

            <el-table-column property="id"
                             align="center"
                             label="ID"
                             width="60">
            </el-table-column>

            <el-table-column property="name"
                             align="center"
                             label="姓名"
                             width="120">
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">

                    <el-button size="mini"
                               icon="el-icon-edit"
                               type="primary"
                               v-on:click="handleEdit(scope.index, scope.row)">编辑</el-button>

                    <el-popconfirm title="确定删除吗？" v-on:confirm="handleDelete(scope.index, scope.row)">
                        <template #reference>
                            <el-button size="mini"
                                       icon="el-icon-delete"
                                       type="warning">删除</el-button>
                        </template>
                    </el-popconfirm>
                  
                </template>
            </el-table-column>
        </el-table>

    </el-card>
</div>

@section Scripts{
    <script>
        var app = {
            data() {
                return {
                    form: {},
                    tableData: []
                }
            },
            created() {
                this.loadData();
            },
            methods: {
                save() {
                    axios
                        .post("/home/Add", this.form)
                        .then(res => {
                            this.form = {};
                            this.$message.success("保存成功!")
                            this.loadData();
                        })
                },
                loadData() {
                    axios
                        .post("/home/getlist")
                        .then(res => {
                            this.tableData = res.data;
                        });
                },
                handleDelete(index, row) {
                    axios
                        .post("/home/remove/" + row.id)
                        .then(res => {
                            this.$message.success("删除成功!");
                            this.loadData();
                        });
                }

            }
        };
        const vue = Vue.createApp(app).use(ElementPlus).mount("#app");
    </script>
}